<template>
  <View>
    <!-- 在线vip vip过期 -->
    <view class="topWrap" :style="{ paddingTop: 56 + safeAreaInsets.top + 'px' }" v-if="type==vipStatusDict.opening||type==vipStatusDict.expired">
      <view class="contentWrap">
        <view class="flex">
          <image 
                  @click="onUserInfo"
                  :src="loginData.avatar?loginData.avatar:'../../static/images/headPortrait.png'" 
                  style="width: 120rpx; height: 120rpx;margin-right: 32rpx;border-radius: 50%;" />
          <view class="flex flex-column justify-center" style="flex: 1;">
            <view class="flex between" style="position: relative;">
              <view class="flex center">
                <view style="max-width: 140rpx;font-size: 36rpx;color: #333;" class="textHide"  @click="onUserInfo">{{ loginData.nickName||"--" }}</view>
                <!--渲染vip等级 -->
                <view class="center labelStyle" style="margin-left: 16rpx;" v-if="type==vipStatusDict.opening"> 
                    VIP1
                </view>
                <view v-else class="ceter labelStyle" style="margin-left: 16rpx;color:#666666 ;background-color: #D0D0D0;">
                    VIP
                </view>
                <view class="center labelStyle" style="margin-left: 25rpx;" @click="()=>onRenewal()"> 
                    续费
                </view>
              </view>
              <view style="font-size: 100rpx; color: #37B874; font-weight: bold; position: absolute; right: 0;top: -30rpx;">
                {{ type==vipStatusDict.opening?'V1':'' }}
              </view>
            </view>
            <view style="margin-top: 15rpx; color: #666;"  @click="onUserInfo">{{ loginData.phone || "--" }}</view>
          </view>
        </view>
        <view class="flex between" style="margin-top: 48rpx;;">
          <view class="yeText" v-if="type==vipStatusDict.opening">
              <text style="font-weight: bold;margin-right: 8rpx">VIP</text>
              <text>{{ loginData.vipEndTime.split(" ")[0] }}</text> 
          </view>
          <view class="glayText" v-else @click="()=>onRenewal()">
              <text style="font-weight: bold;margin-right: 8rpx;">VIP</text>
              <text >已过期</text>
          </view>
          <view class="flex item-center">
            <image src="../../static/images/user/integral.svg"
              style="width: 28rpx;height: 30rpx;margin-right: 12rpx;" />
            <text style="color: #A86C12;font-size:28rpx;max-width: 140rpx;"class="textHide">积分 {{ loginData.myScore }}</text>
          </view>
          <view class="flex item-center ">
            <view class="smallTextStyle">智能分析</view>
            <view class="smallTextStyle" style="margin: 0 16rpx;" >|</view>
            <view class="smallTextStyle">防作弊设置</view>
          </view>
        </view>
      </view>
      <image :src="`../../static/images/user/${type==vipStatusDict.opening?'userBg':'greyUserBg'}.png`" class="bgTopWrap"
        :style="{ top: 56 + safeAreaInsets.top + 'px' }" />
    </view>
    <!-- 未开通 未登录 -->
    <view class="notTpWrap" :style="{ paddingTop: 56 + safeAreaInsets.top + 'px' }" v-else>
      <view class="contentWrap" style="padding: 0rpx;">
        <!-- 未开通 -->
        <view class="flex item-center" v-if="type==vipStatusDict.notOpen">
          <image 
              @click="onUserInfo"
              :src="loginData.avatar?loginData.avatar:'../../static/images/headPortrait.png'" 
              style="width: 120rpx; height: 120rpx;margin-right: 32rpx;border-radius: 50%;" />
          <view class="flex-column justify-center flex1" style="padding-right: 20rpx;">
            <view style="max-width: 140rpx;font-size: 36rpx;color: #333;" class="textHide"  @click="onUserInfo">{{ loginData.nickName||"--" }}</view>
            <view class="flex between item-center" style="margin-top: 15rpx;">
                <view style=" color: #666;"  @click="onUserInfo">{{ loginData.phone || "--" }}</view>
                <view class="glayText">VIP 未开通</view>
                <view class="flex item-center">
                  <image src="../../static/images/user/integral.svg"
                    style="width: 28rpx;height: 30rpx;margin-right: 12rpx;" />
                  <text style="color: #A86C12;font-size:28rpx;max-width: 140rpx;" class="textHide">积分 {{ loginData.myScore }}</text>
                </view>
            </view>
          </view>
        </view>
        <!-- 未登录 -->
        <view class="flex item-center" v-else>
          <image src="../../static/images/user/noTx.svg" style="width: 120rpx; height: 120rpx;margin-right: 32rpx;" />
          <text @click="()=>onJump('/pages/login/login')">登录，免费学习</text>
          <!-- <view class="goLoginBtn" @click="()=>onJump('/login/login')">去登录</view> -->
        </view>
        <view>
          <view class="index-home-vip">
            <image class="index-home-vip-left-icon" :src="'/static/images/indexHomeVipIcon.svg'" mode="widthFix"
              style="width: 78rpx; height: 72rpx" />
            <view class="index-home-vip-content">
              <view class="index-home-vip-content-title">会员中心</view>
              <view class="describe-text">解锁学习新方式</view>
            </view>
            <view class="btnColor text-justify">
              <view class="flex center">
                <text style="margin-right: 10rpx;" @click="()=>onRenewal()">去开通</text>
                <u-icon name="arrow-right" color="#fff" size="10"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <scroll-view :scroll-y="true" class="scrollWrap">
      <view style="content: ''; overflow: hidden;"></view>
      <view v-for="item, i in menuList" :key="item.value" @click="() => onJump(item.path)"
        :class="'flex between menuItem item-center' + (item.cuClass||'')">
        <view class="flex">
          <image :src="`../../static/images/user/menu${item.code}.svg`"
            style="width: 40rpx;height: 40rpx;margin-right: 30rpx;" />
          <view>{{ item.title }}</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </scroll-view>
     <!-- 查询当前所属机构 -->
     <BotMenu :isPopup="isAffiliationPopup" @close="isAffiliationPopup = false"  title="选择服务机构">
        <scroll-view :scroll-y="true"  style="height: 800rpx;">
            <view class="selectTypeItem" v-for="item in organList" :key="item.id" @click="()=>onRenewal(item.organId)">
                {{ item.name }}
            </view>
        </scroll-view>
    </BotMenu>
    <NoOpenPopup :isPopup="isPopup" @close="isPopup=false"/>
    <MTabBar :value="3" />
  </View>
</template>
<script>
import { getOrganList } from '../../myQuestionBank/services/myQuestionBankService'
import { getUserVipInfo, vipHome } from '../../otherPages/services/signInService'
import { notificationFun } from '../../utils/PrjUtils'


export default {

  data() {
    return {
      safeAreaInsets: {},
      menuList: [
        { title: "我的钱包", path: "../../otherPages/myWalletPage",cuClass:" boderTop marginTop", code:8 },
        { title: "每日签到", path: "../../otherPages/signInPage",cuClass:" boderBot marginBot",code:0 },
        { title: "我的错题", path: `/pages/practiceTesting/collectionPage?type=1`,cuClass:" boderTop",code:1 },
        { title: "我的收藏", path: "/pages/practiceTesting/collectionPage?type=2" ,code:2},
        { title: "我参与的", path: `/pages/practiceTesting/collectionPage?type=3`, cuClass:" boderBot marginBot",code:3},
        // { title: "成绩查询", path: "xxxx",cuClass:" actMenuItem",code:4},
        { title: "个人资料", path: "/pages/userInfo/userInfo",cuClass:" boderTop marginTop",code:5},
        { title: "账号工具", path: "/pages/accountTools/accountTools",code:6},
        { title: "回收箱", path: "../../otherPages/recyclingBinPage",cuClass:" boderBot",code:7 },
      ],
      isShow: true,
      loginData:{},
      // type:4,
      isPopup:false,
      vipStatusDict:{
        // 未开通
        notOpen:-1,
        // 开通中
        opening:1,
        // 已经过期
        expired:0,

      },
      // 机构列表
      organList:[],
      // 选择的机构id
      organId:"",
      // 所属机构弹出
      isAffiliationPopup:false,
    }
  },

  beforeMount() {

    uni.getSystemInfo({
      success: (res) => {
        console.log(res, "--26")
        this.windowWidth = res.windowWidth
        this.windowHeight = res.windowHeight
        this.safeAreaInsets = res.safeAreaInsets
      }
    })
    
  },
  onShow() {
    if (uni.getStorageSync('appKey')) {
            this.getUserInfo()
            // console.log(uni.getStorageSync('loginData'))
            // this.loginData = {
            //     ...uni.getStorageSync('loginData'),
            // };
    } else {
            this.loginData = {};
    }
  },
  onPullDownRefresh() {
  },
  watch: {},
  computed: {
    type(){
      if(Object.keys(this.loginData).length){
        return this.loginData.vipStatus
      }
      else{
        return 4
      }
    }
  },
  methods: {
    // 跳转
    onJump(path) {
      if(path=="xxxx"){
        this.isPopup=true
        return 
      }
      uni.navigateTo({
        url: `${path}`
      })
    },
    // 去用户信息
    onUserInfo(){
      uni.navigateTo({
        url: `/pages/userInfo/userInfo`
      })
    },
    // 去续费
   async onRenewal(organId=""){
      if(organId){
            vipHome({organId:organId}).then(res => {
              if(res?.vipConfig){
                uni.navigateTo({
                  url: `../../otherPages/memberPage?info=${encodeURIComponent(JSON.stringify({organId:organId??""}))}`
                })
              }
              else{
                notificationFun("暂未开通,请联系管理员。")
                this.isAffiliationPopup = false
              }
            })
      }
      else{
          // 查询当前机构
          let res= await getOrganList()
          console.log(res,"---res")
          if(res.length>1){
            this.organList = res
            this.isAffiliationPopup = true
          }
          else{
            vipHome({organId:organId}).then(res => {
              if(res?.vipConfig){
                uni.navigateTo({
                      url: `../../otherPages/memberPage?info=${encodeURIComponent(JSON.stringify({organId:res[0]?.organId??""}))}`
                })
              }
              else{
                notificationFun("暂未开通,请联系管理员。")
              }
            })
          
          }
      }
    },
    getUserInfo() {
      // 获取用户信息
      getUserVipInfo().then(data => {
        let newData = { ...uni.getStorageSync('loginData'), ...data } || {}
        uni.setStorageSync('loginData', newData);
        this.loginData = newData
      })
    }
  
  }
}
</script>

<style scoped lang="scss">
.topWrap {
  position: relative;
  /* padding: 30rpx; */
  /* padding-bottom: 28rpx; */
  z-index: 1;
  background-color: #fff;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  overflow: hidden;
  .bgTopWrap {
    position: absolute;
    /* 或者使用 fixed，根据你的布局需求 */
    top: 0;
    left: 0;
    width: 100% ;
    height: 153px;
    z-index: -1;
    /* margin: 0 30rpx; */
    /* 容器高度 */
  }

  .contentWrap {
    width: "100%";
    padding: 36rpx 38rpx;
    box-sizing: border-box;
    position: relative;
  }
  .labelStyle{
    /* width: 60rpx; */
    padding: 2rpx 10rpx 0 10rpx ;
    height: 32rpx;
    border-radius: 10rpx;
    color: #A86C12;
    background-color: #EED682;
    text-align: center;
    font-size: 24rpx;
  }
}
.notTpWrap{
  position: relative;
  padding: 30rpx;
  z-index: 1;
  background-color: #fff;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;

  .bgTopWrap {
    position: absolute;
    /* 或者使用 fixed，根据你的布局需求 */
    top: 0;
    left: 0;
    width: 100% ;
    height: 246rpx;
    z-index: -1;
    margin: 0 30rpx;
    /* 容器高度 */
  }

  .contentWrap {
    width: "100%";
    padding: 36rpx 64rpx;
    box-sizing: border-box;
    position: relative;
  }
}
.lineStyle {
  width: 2rpx;
  height: 16rpx;
  background-color: #666666;
  margin: 0 15rpx;
}

.menuItem {
  height: 105rpx;
  padding: 0 32rpx;
  background-color: #fff;
}

.actMenuItem {
  margin: 20rpx 0;
  border-radius: 24rpx;
}
.boderBot{
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
}
.boderTop{
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}
.marginTop {
  margin-top: 20rpx;
}
.marginBot{
  margin-bottom: 20rpx;
}
.goLoginBtn {
  text-align: center;
  background-color: #37B874;
  color: #fff;
  padding: 15rpx;
  padding-right: 100rpx;
  position: absolute;
  right: -30rpx;
  border-top-left-radius: 24rpx;
  border-bottom-left-radius: 24rpx;
}

.index-home-vip {
  margin-top: 46rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: rgba(246, 255, 247, 1);
  padding: 0 20rpx;
  border-radius: 24rpx;
}

.index-home-vip-left-icon {
  margin-right: 40rpx;
  margin-left: 20rpx;
}

.index-home-vip-content {
  flex: 1;
}

.index-home-vip-content-title {
  font-size: 36rpx;
  color: rgba(55, 184, 116, 1);
  font-weight: bold;
}

.btnColor {
  color: #fff;
  border: 1px solid #4DC38585;
  background: linear-gradient(90deg, #37B874 0%, #B7F5D4 100%);
  padding: 15rpx 20rpx;
  border-radius: 24rpx;
}
.scrollWrap{
  height: calc(100vh - 590rpx);
}
.textHide{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popTitle {
    color: #333;
    font-size: 32rpx;
    font-weight: 500;
}
.smallTextStyle{
  font-size: 28rpx;
  color: #666;
}
.yeText{
  font-size: 28rpx;
  color: #A86C12;
}
.glayText{
  font-size: 28rpx;
  color: #666666;
}
.selectTypeItem {
      display: flex;
      justify-content: center;
      padding: 32rpx 20rpx;
      border-bottom: 1rpx solid #eee;
  }
</style>
